<template>
  <div id="design">
    <header-item></header-item>
    <title-item :title="title" :title2="title2"></title-item>
    <div class="fontbox">
      <h1>H1标题</h1>
      <p class="font">
        Est nula senectus dapibus rinalla tortor ula laoret tempus pretium
        orem.Vestbulum lacus et nonummy ld Nam ut yolutpat psum sit metus .Sed
        enim eros Proin Nulam laoret dictumst cursus Sed Fusce eu.Est auctor et
        mauris egestas at Qulsque montes lacus ac pede.
      </p>
      <h2>H2标题</h2>
      <p class="font">
        Est nula senectus dapibus rinalla tortor ula laoret tempus pretium
        orem.Vestbulum lacus et nonummy ld Nam ut yolutpat psum sit metus .Sed
        enim eros Proin Nulam laoret dictumst cursus Sed Fusce eu.Est auctor et
        mauris egestas at Qulsque montes lacus ac pede.
      </p>
      <h3>H3标题</h3>
      <p class="font">
        Est nula senectus dapibus rinalla tortor ula laoret tempus pretium
        orem.Vestbulum lacus et nonummy ld Nam ut yolutpat psum sit metus .Sed
        enim eros Proin Nulam laoret dictumst cursus Sed Fusce eu.Est auctor et
        mauris egestas at Qulsque montes lacus ac pede.
      </p>
      <h4>H4标题</h4>
      <p class="font">
        Est nula senectus dapibus rinalla tortor ula laoret tempus pretium
        orem.Vestbulum lacus et nonummy ld Nam ut yolutpat psum sit metus .Sed
        enim eros Proin Nulam laoret dictumst cursus Sed Fusce eu.Est auctor et
        mauris egestas at Qulsque montes lacus ac pede.
      </p>
      <h5>H5标题</h5>
      <p class="font">
        Est nula senectus dapibus rinalla tortor ula laoret tempus pretium
        orem.Vestbulum lacus et nonummy ld Nam ut yolutpat psum sit metus .Sed
        enim eros Proin Nulam laoret dictumst cursus Sed Fusce eu.Est auctor et
        mauris egestas at Qulsque montes lacus ac pede.
      </p>
      <h6>H6标题</h6>
      <p class="font">
        Est nula senectus dapibus rinalla tortor ula laoret tempus pretium
        orem.Vestbulum lacus et nonummy ld Nam ut yolutpat psum sit metus .Sed
        enim eros Proin Nulam laoret dictumst cursus Sed Fusce eu.Est auctor et
        mauris egestas at Qulsque montes lacus ac pede.
      </p>
      <div class="title">
        <title-item
          style="background-color: #666666"
          :title="title3"
          :title2="title4"
        ></title-item>
      </div>
      <div class="title1">
        <h1>章节标题</h1>
        <p class="font">
          Est nula senectus dapibus rinalla tortor ula laoret tempus pretium
          orem.Vestbulum lacus et nonummy ld Nam ut yolutpat psum sit metus .Sed
          enim eros Proin Nulam laoret dictumst cursus Sed Fusce eu.Est auctor
          et mauris egestas at Qulsque montes lacus ac pede.
        </p>
      </div>
      <div class="title1">
        <h2>博客文章标题</h2>
        <p class="font">
          Est nula senectus dapibus rinalla tortor ula laoret tempus pretium
          orem.Vestbulum lacus et nonummy ld Nam ut yolutpat psum sit metus .Sed
          enim eros Proin Nulam laoret dictumst cursus Sed Fusce eu.Est auctor
          et mauris egestas at Qulsque montes lacus ac pede.
        </p>
      </div>
      <!-- 按钮样式 -->
      <div class="butbox">
        <div class="but">
          <h1>按钮样式</h1>
          <div class="butline">
            <el-button round>圆角按钮</el-button>
            <el-button type="primary" round>主要按钮</el-button>
            <el-button type="success" round>成功按钮</el-button>
          </div>
          <div class="butline">
            <el-button type="info" round>信息按钮</el-button>
            <el-button type="warning" round>警告按钮</el-button>
          </div>
          <div class="butline">
            <el-button round>圆角按钮</el-button>
            <el-button type="primary" round size="small">主要按钮</el-button>
          </div>
        </div>
        <div class="label">
          <h1>标签</h1>
          <div class="option">
            <div class="optiontitbox">
              <p class="optiontit1" @click="activeTab = 'tab1'">家</p>
              <p class="optiontit2" @click="activeTab = 'tab2'">轮廓</p>
              <p class="optiontit2" @click="activeTab = 'tab3'">消息</p>
            </div>
            <div class="posts1" v-show="activeTab === 'tab1'">
              生牛仔你可能没有听说过他们牛仔短裤奥斯汀。内修恩豆腐树桩镇阿里夸，复古合成师清洁。胡子陈词滥调，威廉斯堡卡尔素食赫尔维蒂卡Reprehenderit 屠夫 keffiyeh 捕梦者合成器
            </div>
            <div class="posts2" v-show="activeTab === 'tab2'">456</div>
            <div class="posts3" v-show="activeTab === 'tab3'">789</div>
          </div>
        </div>
      </div>
      <!-- 按钮样式 -->
      <!-- 形式 -->
      <h1>形式</h1>
      <form-item></form-item>
      <!-- 形式 -->
    </div>
    <footer-item></footer-item>
  </div>
</template>

<script setup>
import { ref } from "vue";
import FooterItem from "../components/FooterItem.vue";
import HeaderItem from "../components/HeaderItem.vue";
import TitleItem from "../components/TitleItem.vue";
import FormItem from "../components/FormItem.vue";

const title = ref("字体排印学");
const title2 = ref("家/字体排印学");
const title3 = ref("页面标题");
const title4 = ref("家/博客");
const activeTab =ref("tab1");
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.fontbox {
  width: 65%;
  margin: auto;
  padding-top: 150px;
}
.font {
  margin-top: 30px;
  margin-bottom: 35px;
  color: #9d9f9a;
}
.butbox {
  display: flex;
  justify-content: space-between;
  border-top: solid #e0e3e3 1px;
  border-bottom: solid #e0e3e3 1px;
}
.but{
  padding: 40px 0;
}
.butline{
  margin: 40px 0 0px 0;
}
/* 标签 */
.label{
  width: 48%;
  padding: 40px 0;
}
.option {
  width: 100%;
  margin-top: 40px;
}
.optiontitbox {
  display: flex;
  padding-bottom: 20px;
  border-bottom: solid 4px white;
}
.optiontit1 {
  margin-right: 20px;
  position: relative;
  cursor: pointer;
}
.optiontit1::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 20px;
  border-bottom: solid #4485ae 4px;
}
.optiontit2 {
  margin-right: 20px;
  position: relative;
  cursor: pointer;
}
.optiontit2::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 20px;
  border-bottom: solid #4485ae 4px;
}
.posts1{
  display: flex;
  margin-top: 20px;
}
/* 标签 */



@media screen and (max-width:1024px) {
  .fontbox{
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }
  .butbox{
    display: block;
  }
  .label{
    width: 100%;
  }
}
</style>